<template>
  <div class="page_search_my_love">
    <div class="share_title_img"></div>
    <div class="share_container">
      <p class="user_name">张山李四在一起xx天了</p>
      <div class="flex">
        <img class="user_head"
             src="@/assets/img/users/list2.png">
        <div class="user_desc">张山李四在一起xx天了张山李四在一起xx天了张山李四在一起xx天了张山李四在一起xx天了</div>
      </div>
      <div class="qrcode_container">
        <p class="qrcode_tip">扫码送TA祝福</p>
        <div class="qrcode_bg">
          <div id="qrcode"
               ref="qrcode"></div>
        </div>
      </div>
    </div>

    <div class="shaer_quotes_tip">
      下面这句话可能跟你的朋友圈更配哦～
    </div>
    <div class="share_quotes_container">
      <div class="share_quotes text-line-2 ">{{blessing}}</div>
      <div class="share_btn_box flex justify-between">
        <div @click="changeBlessing"
             class="share_btn">换一句</div>
        <div @click="handleCopy"
             :data-clipboard-text="blessing"
             class="share_btn share_btn_copy">复制文字</div>
      </div>
    </div>

    <div @click="createPoster"
         class="btn_create_share_img">生成图片</div>

    <!-- 下面是canvas -->
    <div id="posterHtml"
         ref="posterHtml"
         class="canvas_box">
      <div class="share_title_img"></div>
      <div class="canvas_container_bg">
        <div class="canvas_container">
          <img class="canvas_user_img"
               src="@/assets/img/users/list2.png"
               alt="">
          <div class="canvas_user_box">
            <div class="canvas_user_name">张山李四在一起xx天了</div>
            <div class="canvas_user_desc ">张山李四在一起xx天了四在一起xx天了张山李起xx一起xx天了</div>
          </div>
          <div class="canvas_share_tip_box">
            <p class="canvas_share_tip">我正在参与七夕集祝福赢大奖活动!</p>
            <p class="canvas_share_tip">你也快快来加入!</p>
            <img class="canvas_share_logo"
                 src="@/assets/img/logo.png"
                 alt="logo">
          </div>

          <div class="canvas_qrcode_container">
            <div class="canvas_qrcode_bg">
              <div id="canvas_qrcode"
                   ref="canvas_qrcode"></div>
            </div>
            <p class="canvas_qrcode_tip">扫码送TA祝福</p>
          </div>
        </div>

      </div>
    </div>

    <Dialog :show="showPosterDialog">
      <div class="poster_dialog_container"
           :class="showPosterDialog?'show':'hide'"
           @click="handleClosePoster">
        <img :src="posterImg"
             class="poster_img"
             alt="">
      </div>
    </Dialog>

  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import Dialog from "@/components/dialog/dialog"
import html2canvas from 'html2canvas'
import Clipboard from 'clipboard';
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      qrCode: '',
      posterImg: '',
      showPosterDialog: false,
      blessing: '',
      blessingList: [],
    }
  },
  mounted() {
    this.initQrcode()
    this.getBlessingList()
  },
  methods: {
    handleCopy() {
      let clipboard = new Clipboard(".share_btn_copy");
      clipboard.on("success", () => {
        clipboard.destroy();
        this.$toast('复制成功!')
      })
    },
    getBlessingList() {
      this.$api.apiHomeBlessing().then(res => {
        console.log('祝福语列表', res);
        this.blessingList = res.data.text
        this.changeBlessing()
      })
    },
    changeBlessing() {
      this.blessing = this.blessingList[this.getIntRandom(0, this.blessingList.length - 1)]
    },
    getIntRandom(lowerValue, upperValue) {
      return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
    },
    handleClosePoster() {
      this.showPosterDialog = false
    },
    createPoster() {
      var $toast = this.$toast.loading({
        message: '生成中...',
        duration: 0,
        forbidClick: true,
      });
      // 生成海报
      const domObj = this.$refs.posterHtml
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        // onclone(doc) {
        //   let e = doc.querySelector('#posterHtml')
        //   console.log(111, doc, e);
        //   e.style.display = 'block'
        // }
      }).then(canvas => {
        $toast.clear()
        this.posterImg = canvas.toDataURL('image/png')
        this.showPosterDialog = true
        sessionStorage.setItem("poster", this.posterImg)
        this.$router.push('/poster')
      })
    },
    initQrcode() {
      let $qrcode = this.$refs.qrcode
      let $canvas_qrcode = this.$refs.canvas_qrcode
      if ($qrcode) {
        let config = $qrcode.getBoundingClientRect()
        new QRCode('qrcode', {
          width: config.width,
          height: config.height,
          text: 'https://www.baidu.com/', // 二维码地址
          colorDark: '#000',
          colorLight: '#fff'
        });
      }
      if ($canvas_qrcode) {
        let canvas_config = $canvas_qrcode.getBoundingClientRect()
        new QRCode('canvas_qrcode', {
          width: canvas_config.width,
          height: canvas_config.height,
          text: 'https://www.baidu.com/', // 二维码地址
          colorDark: '#000',
          colorLight: '#fff'
        });
      }

    }
  }
}
</script>

<style lang="scss" >
.page_search_my_love {
  min-height: 100vh;
  background-image: url("~@/assets/img/share_bg.png");
  background-size: 100%;
  background-color: #ffe4ce;
  background-repeat: no-repeat;
  padding: 0 40px;
  padding-top: 58px;

  .poster_dialog_container {
    width: 100%;
    height: 100%;
    padding: 20px;
    .poster_img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &.hide {
      animation: hide 0.6s forwards;
    }
    &.show {
      animation: show 0.6s forwards;
    }
    @keyframes show {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes hide {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(0);
      }
    }
  }
  .canvas_box {
    position: fixed;
    left: -9990px;
    top: -9999px;
    // left: 0;
    // top: 0;
    // z-index: 999;
    width: 100%;
    height: 100vh;
    background: #ffe4ce;
    background-image: url("~@/assets/img/share_bg.png");
    background-size: 100%;
    background-color: #ffe4ce;
    background-repeat: no-repeat;
    padding-top: 58px;
    .share_title_img {
      width: 670px;
    }
    .canvas_container_bg {
      width: 670px;
      height: 1056px;
      margin: 0 auto;
      border: 2px solid #000000;
      position: relative;
      padding: 0 20px;

      &::before,
      &::after {
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        border: 2px solid #000000;
      }
      &::before {
        left: 0;
        top: 0;
        z-index: 3;
        background-color: #fff;
      }
      &::after {
        right: -15px;
        bottom: -15px;
        z-index: 2;

        background-color: #ffa65d;
      }
      .canvas_container {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 4;
        padding-top: 125px;

        .canvas_user_img {
          width: 458px;
          height: 540px;
          display: block;
          margin: 0 auto;
          object-fit: cover;
        }
        .canvas_user_box {
          padding-bottom: 20px;
          border-bottom: 1px solid #000;
          position: relative;
          .canvas_user_name {
            font-size: 28px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 800;
            color: #333333;
            line-height: 36px;
            text-align: center;
            margin-top: 20px;
          }
          .canvas_user_desc {
            font-size: 24px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #999999;
            line-height: 36px;
            margin-top: 10px;
            text-indent: 1em;
          }
        }
        .canvas_share_tip_box {
          margin-top: 20px;
          font-size: 24px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
          line-height: 36px;
          .canvas_share_logo {
            width: 200px;
            margin-left: -10px;
            margin-top: 10px;
          }
        }

        .canvas_qrcode_container {
          position: absolute;
          right: 0px;
          bottom: 50px;
          .canvas_qrcode_bg {
            width: 120px;
            height: 120px;
            background-image: url("~@/assets/img/qrcode_bg.png");
            background-size: 100% 100%;
            padding-left: 6px;
            padding-top: 6px;
            #canvas_qrcode {
              width: 100px;
              height: 100px;
            }
          }
          .canvas_qrcode_tip {
            width: 300px;
            font-size: 24px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: rgba(26, 26, 26, 0.85);
            line-height: 36px;
            position: absolute;
            right: 0;
            text-align: right;
          }
        }
      }
    }
  }

  .share_title_img {
    width: 100%;
    height: 165px;
    margin: 0 auto;
    background-image: url("~@/assets/img/share_title.png");
    background-size: 100%;
  }
  .share_container {
    width: 100%;
    background: #ffffff;
    border: 4px solid #000000;
    margin: 0 auto;
    padding: 60px 30px 80px 30px;
    position: relative;
    .user_name {
      font-size: 36px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 800;
      color: rgba(0, 0, 0, 0.85);
      line-height: 54px;
      padding-bottom: 30px;
    }
    .user_head {
      width: 180px;
      height: 217px;
      background: #f6f6f6;
      border-radius: 10px;
      border: 2px solid #000000;
      margin-right: 30px;
    }
    .user_desc {
      width: 400px;
      // flex: 1;
      font-size: 28px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 38px;
      text-indent: 2em;
    }
    .qrcode_container {
      position: absolute;
      right: 20px;
      bottom: -100px;
    }
    .qrcode_tip {
      font-size: 24px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: rgba(26, 26, 26, 0.85);
      line-height: 36px;
    }
    .qrcode_bg {
      width: 152px;
      height: 152px;
      background-image: url("~@/assets/img/qrcode_bg.png");
      background-size: 100% 100%;
      padding-left: 10px;
      padding-top: 10px;
      #qrcode {
        width: 120px;
        height: 120px;
      }
    }
  }

  .shaer_quotes_tip {
    margin-top: 100px;
    width: 438px;
    height: 50px;
    background: #ffe4ce;
    border: 2px solid #000000;
    border-bottom: none;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 50px;
    padding-left: 12px;
    position: relative;
    &::after {
      width: 20px;
      height: 50px;
      content: "";
      background-color: #cee9ff;
      border: 2px solid #000000;
      border-left: none;
      // border-bottom: none;
      position: absolute;
      top: -2px;
      right: -20px;
    }
  }
  .share_quotes_container {
    width: 100%;
    height: 194px;
    background-image: url("~@/assets/img/share_two.png");
    background-size: 100% 100%;
    position: relative;
    z-index: 2;
    .share_quotes {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 33px;
      padding: 40px 30px 0 30px;
      min-height: 100px;
    }
    .share_btn_box {
      padding: 0 100px;
      margin-top: 10px;
      .share_btn {
        width: 170px;
        height: 58px;
        line-height: 52px;
        text-align: center;
        background-image: url("~@/assets/img/share_btn_1.png");
        background-size: 100% 100%;
        font-size: 28px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }

  .btn_create_share_img {
    width: 628px;
    height: 126px;
    background-image: url("~@/assets/img/share_btn_2.png");
    background-size: 100% 100%;
    line-height: 100px;
    font-size: 48px;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 38px;
  }
}
</style>